import React from 'react'
import { Button, message, Modal} from 'antd'
import Table from '../../components/Table'
import { FormModal } from '../../components/ModalForm'
import 'whatwg-fetch'
import API from '../../axios/api'
import {withRouter} from "react-router-dom";
import {inject, observer} from "mobx-react";
require('es6-promise').polyfill();

let columns = [
    { dataIndex: 'RudderUrl', title: '分舵头像', width: 200,render: (text, record) =>  <img src={text} height="40" width="40" /> },
    { dataIndex: 'RudderName', title: '分舵名称', width: 200,},
    { dataIndex: 'RudderDescribe', title: '分舵描述', width: 200,},
    { dataIndex: 'MainRudderName', title: '总舵名称', width: 200,},
]

@withRouter @inject('appStore') @observer
export default class rudder extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tData: [],
            item: {},
            loading: true,
            modalShow: false,
            modalShowEdit: false,
            modalShowAddApp: false,
            Page: 1,
            Pages:1,
        }

    }

    onPageChange = (e) =>{
        this.setState({
            Page:e,
        },()=>{
            this.fetchTableData()
        })
    }

    // 获取表格数据
    fetchTableData =  async () => {
        let parms = {
            Page:this.state.Page,
            PageSize: 10,
        }
        await API.fetchRudderPages(parms).then((res) => {
            if(res.Code === 200) {
                this.setState({
                    tData: res.Data.List,
                    Pages:res.Data.Pages
                });
            }
            this.setState({
                loading: false
            });
        })
    }

    componentDidMount() {
        this.fetchTableData()
    }

    add = () =>{
        this.setState({
            modalShow: true
        })
    }

    onOk = (param) =>{
        API.addRudder(param).then(res =>{
            if(res.Code === 200)
            {
                message.success('添加成功')
                this.onCancel()
                this.fetchTableData()

            }
            else message.error(res.Message)
        })
    }

    onCancel = () =>{
        this.setState({
            modalShow: false
        })
    }

    onOkEdit = (param) =>{
        this.setState({
            modalShowEdit: false
        })
        message.success('编辑成功')
    }

    onCancelEdit = () =>{
        this.setState({
            modalShowEdit: false
        })
    }

    tableAction = (actionKey, item) => {
        if (actionKey === 'addApp') {
            this.setState({
                item: item,
                modalShowAddApp: true
            })
        }
    }

    fields = () => {
        return [{
            label: '分舵名称',
            type: 'input',
            name: 'RudderName',
            options: {
                rules: [{
                    required: true,
                    message: '分舵名称必填!',
                }]
            }
        }, 
        // {
        //     label: '分舵头像',
        //     type: 'input',
        //     name: 'RudderUrl'
        // }, 
         {
            label: '分舵描述',
            type: 'input',
            name: 'RudderDescribe'
        },
        ]
    }


    onOkApp = (param) =>{
        param.RudderId = this.state.item.Id
        API.addRudderApp(param).then(res =>{
            if(res.Code === 200)
            {
                message.success('添加成功')
                this.onCancelApp()
            }
            else message.error(res.Message)
        })
    }

    onCancelApp = () =>{
        this.setState({
            modalShowAddApp: false
        })
    }

    fieldsApp = () => {
        return [{
            label: '小程序名称',
            type: 'input',
            name: 'AppName',
            options: {
                rules: [{
                    required: true,
                    message: '必填!',
                }]
            }
        }, {
            label: '小程序AppId',
            type: 'input',
            name: 'AppId'
        },  {
            label: '小程序密匙',
            type: 'password',
            name: 'AppSecret'
        },{
            label: '小程序回调地址',
            type: 'input',
            name: 'CallbackUrl'
        },
        ]
    }

    render() {
        return (
            <div id="wrap">
                <div className="tableBox">
                    <div style={{ paddingTop: 10 }}>
                        <Button type="primary" onClick={this.add} >添加</Button>
                    </div>
                    <div style={{ paddingTop: 10 }}>
                        <Table
                            onCtrlClick={ this.tableAction }
                            pagination={ true }
                            pageSize={10}
                            header={ columns }
                            data={ this.state.tData }
                            loading={ this.state.loading }
                            action={row => [
                                { key: 'addApp', name: '添加小程序', color: 'blue', icon: 'plus'}
                            ]}
                            scroll={{y: 385 }}
                            total={this.state.Pages}
                            onChange={this.onPageChange}
                            currentPage={this.state.Page}
                        />
                    </div>
                </div>
                <FormModal
                    modalKey="add"
                    visible={this.state.modalShow}
                    title="添加"
                    fields={this.fields()}
                    onOk={this.onOk}
                    onCancel={this.onCancel}
                    okText="保存"
                />
                <FormModal
                    modalKey="add"
                    visible={this.state.modalShowAddApp}
                    title="添加小程序"
                    fields={this.fieldsApp()}
                    onOk={this.onOkApp}
                    onCancel={this.onCancelApp}
                    okText="保存"
                />
            </div>
        )
    }
}
